<!-- 字图 -->
<template>
  <view class="view-zitu">
    <view class="relative">
      <wd-textarea
        v-model="form.prompt"
        placeholder="示例：“拿着咖啡，微笑，坐在沙发上”"
        :style="props.url ? 'padding-right: 80px' : ''"
      />
      <image v-if="props.url" :src="props.url" mode="widthFix" class="tip-img" />
    </view>
    <wd-divider style="margin-bottom: 10px"></wd-divider>
    <view class="p-2" v-if="sentencesList.length">
      <view class="tag">选定句子:</view>
      <view class="sentence-list">
        <view
          class="color-coolgray mb-1 sentence mt-1"
          v-for="(item, index) in sentencesList"
          :key="index"
          @click="choosePrompt(item)"
        >
          {{ item }}
        </view>
      </view>
    </view>
    <view class="row">
      <view class="tag">选定角色:</view>
      <view class="role-list">
        <view
          v-for="(item, index) in roleList"
          :key="index"
          @click="onRoleChange(item)"
          class="role-item"
          :class="{ selected: item.id === form.role_id }"
        >
          <image class="role-avatar" mode="widthFix" :src="item.description" />
          <view class="role-name">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="btn-view">
      <wd-button class="btn-begin" type="success" @click="onBegin" size="large">生成视频</wd-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { createVideo, CreateVideoParams, getRoleList } from '@/service/index'
import { useUserStore } from '@/store'
const userStore = useUserStore()
const roleList = ref<any>([])

const props = defineProps({
  url: {
    type: String,
    default: '',
  },
  roleId: {
    type: Number,
    default: null,
  },
})
const sentencesList = [
  //   '如果我能看得见,就能轻易的分辨白天黑夜,就能准确的在人群中,牵住你的手',
  //   '以前就是脾气太好，现在发现一旦没有了素质，世界都开阔了！',
  //   '在晨光的照耀下，唤醒沉睡的心灵，用一颗明净的心去感受世界的每一份美好。清醒地活在当下，让每一刻都充满智慧和力量。',
  //   '生活的画卷需要我们用清醒的笔触去描绘，每一步都需精心构思，每一景都需细心观察。清醒地前行，绘制出属于自己的精彩篇章。',
  //   '清醒，是穿越生活迷雾的灯塔，它指引我们在复杂多变的环境中找到正确的航向。让清醒成为习惯，让每一步都坚实而有力。',
  //   '在纷扰的世界中，保持一颗清醒的心，就像拥有一把锐利的剑，能够斩断迷茫和困惑。清醒地生活，让决策更加精准，让人生更加精彩。',
  //   '清醒不仅是对外界事物的清晰认知，更是对内心深处的深刻洞察。在清醒的状态下，我们能够更好地理解自己，更有效地塑造未来。',
]

const form = ref({
  prompt: '',
  role_id: null,
})

const emit = defineEmits(['changeRole'])
function onRoleChange(role) {
  form.value.role_id = role.id
  emit('changeRole', role.id)
}
function onBegin() {
  if (!form.value.prompt) {
    uni.showToast({
      title: '请输入内容',
      icon: 'none',
    })
    return
  }
  if (!form.value.role_id) {
    uni.showToast({
      title: '请选择角色',
      icon: 'none',
    })
    return
  }
  uni.showLoading({
    title: '创建中...',
    mask: true,
  })

  createVideo({
    appid: userStore.userInfo.appid || 'test_appid',
    image_url:
      props.url || roleList.value.filter((item) => item.id === form.value.role_id)[0]?.description,
    role_id: form.value.role_id,
    caption: form.value.prompt,
    original: !!props.url,
  })
    .then((res) => {
      console.log(res.data)
      uni.showModal({
        title: '提示',
        content: '创建成功，请稍后到我的任务列表查看',
        showCancel: false,
      })
    })
    .finally(() => {
      uni.hideLoading()
    })
}

function choosePrompt(item) {
  form.value.prompt = item
}

function getRoleListData() {
  getRoleList()
    .then((res) => {
      console.log(res)
      roleList.value = res.data
      form.value.role_id = Number(props.roleId) || res.data[0].id
    })
    .finally(() => {
      uni.hideLoading()
    })
}

onMounted(() => {
  uni.showLoading({
    title: '加载中...',
    mask: true,
  })
  getRoleListData()
})
</script>

<style scoped lang="scss">
.view-zitu {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 5px 0 0 0;
  box-sizing: border-box;
  width: 100%;

  .btn-view {
    width: 100%;
    height: 80px;
    background-color: #fff;
    position: fixed;
    bottom: 0px;
    display: flex;
    bottom: 00px;
    align-items: center;
    justify-content: center;
  }
  .btn-begin {
    font-weight: bold;
    z-index: 2;
    border-radius: 4px;
    background-color: #69c46a;
    width: 40%;
  }
  .row {
    display: flex;
    flex-direction: column;
    padding: 0 10px 100px;

    &:last-child {
      border-bottom: none;
    }
  }
  .list {
    flex: 1;
  }
}
$labelHeight: 42rpx;

.role-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  padding-top: 10px;

  &::-webkit-scrollbar {
    display: none;
  }
}

.role-item {
  margin-top: 12rpx;
  height: fit-content;
  display: inline-block;
  color: #666;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  text-align: center;
  margin-right: 15px;
  vertical-align: bottom;

  .role-avatar {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
  }

  // 角色名称
  .role-name {
    font-size: $fontSizeNormal;
    text-align: center;
    width: 100%;
    color: #333;
    font-weight: 200;
    line-height: $labelHeight;
    height: $labelHeight;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &.selected {
    .role-avatar {
      box-shadow: 2rpx 6rpx 12rpx rgba(23, 159, 26, 0.8);
    }
    .role-name {
      color: #000000;
      font-weight: 600;
    }
  }
}
.role-item:last-of-type {
  margin: 0;
}
.sentence-list {
  max-height: 180px;
  overflow-y: auto;
}
.sentence {
  border-bottom: 1px solid #eee;
  padding-bottom: 3px;
  font-size: 14px;
  line-height: 20px;
}

.tip-img {
  position: absolute;
  z-index: 10;
  right: 6px;
  top: 5px;
  width: 60px;
}
</style>
